<template>
  <div class="player_bg">
    <screenfull class="screenfull" id="screenfull" />
    <div v-for="(item, i) in videoList">
      <Video :ref="`video`" @playerEnd="handlePlayerEnd" v-show="videoIndex == i" :videoIndex="i" :videoSrc="item"/>
    </div>
  </div>
</template>

<script>
import { videoPlayer } from "vue-video-player";
import 'video.js/dist/video-js.css'
import Screenfull from '@/components/Screenfull'
import Video from './components/video'

export default {
  name: "Player",
  props: {

  },
  components: {
    videoPlayer,
    Video,
    Screenfull
  },
  data() {
    return {
      videoIndex: 0,
      videoList: [
        'https://image.utea88.com/statics/blessing/1.mp4?t=1',
        // 'https://image.utea88.com/statics/blessing/2.mp4?t=1',
        // 'https://image.utea88.com/statics/blessing/3.mp4?t=1',
        // 'https://image.utea88.com/statics/blessing/4.mp4?t=1',
        // 'https://image.utea88.com/statics/blessing/5.mp4?t=1',

        // require('@/assets/video/1.mp4'),
        // require('@/assets/video/2.mp4'),
        // require('@/assets/video/3.mp4'),
        // require('@/assets/video/4.mp4'),
        // require('@/assets/video/5.mp4'),
      ]
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    handlePlayerEnd() {
      if (this.videoIndex == (this.videoList.length - 1)) {
        this.videoIndex = 0

        this.$emit('allVideoEnd')
      } else {
        this.videoIndex ++ 
        this.$refs['video'][this.videoIndex].playVideo()
      }
    },
    restart() {
      this.videoIndex = 0
      this.$refs['video'][this.videoIndex].playVideo()
    },
  },
  created() {
    this.playerOptions.width = window.screen.width
    this.playerOptions.height = window.screen.height
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .player_bg {
    width: 100%;
    height: 100%;
    background: oldlace;

    .video-player {
      width: 100%;
      height: 100%;
    }
  }

  ::v-deep .video-js .vjs-control-bar {
    // display: none;
  }

  ::v-deep .video-js .vjs-tech {
    object-fit: contain;
  }

  ::v-deep .vjs-poster {
    background-color: cover;
  }

  .screenfull {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: rgba($color: red, $alpha: 0);
    z-index: 100;
  }
</style>